<template>
  <div>
    <!-- 渲染一段文本 -->
    <span v-text="msg"></span>
    <!-- 渲染一段文本 -->

    <!-- 渲染一段 HTML -->
    <div v-html="html"></div>
    <!-- 渲染一段 HTML -->

    <!-- 循环创建一个列表 -->
    <ul v-if="items.length">
      <li v-for="(item, index) in items" :key="index">
        <span>{{ item }}</span>
      </li>
    </ul>
    <!-- 循环创建一个列表 -->

    <!-- 一些事件（ @ 等价于 v-on ） -->
    <button @click="hello">Hello</button>
    <!-- 一些事件（ @ 等价于 v-on ） -->
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const msg = ref<string>('Hello World!')
    const html = ref<string>('<p>Hello World!</p>')
    const items = ref<string[]>(['a', 'b', 'c', 'd'])

    function hello() {
      console.log(msg.value)
    }

    return {
      msg,
      html,
      items,
      hello,
    }
  },
})
</script>

<style scoped>

</style>
